<template>
<div>
  <vxe-toolbar>
    <template #buttons>
      <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">展开所有</vxe-button>
      <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
    </template>
  </vxe-toolbar>
  <vxe-table
    resizable
    border="inner"
    ref="xTree"
    :tree-config="{children: 'children'}"
    :data="tableData">
    <vxe-table-column field="name" width="40%" title="名称" tree-node></vxe-table-column>
    <vxe-table-column field="grade" width="40%" title="等级"></vxe-table-column>
    <vxe-table-column width="20%" title="操作">
      <template v-slot="{ row }">
        <Button v-show="row.grade === '1'" size="small" type="primary" style="margin-right: 10px" @click="addInfo(row)">添加下级</Button>
        <Button size="small" type="info" style="margin-right: 10px" @click="updateInfo(row)">修改</Button>
        <Button v-show="row.grade === '2'" size="small" type="error" @click="deleteInfo(row)">删除</Button>
      </template>
    </vxe-table-column>
  </vxe-table>
  <Modal
    v-model="modal"
    title="编辑标签"
    @on-ok="saveReourceMapInfo">
      <Form :model="info" :label-width="80">
        <FormItem label="上级标签">
          <Select :disabled="info.grade === '1'" v-model="info.pid">
            <Option v-for="(item,index) in labelList"  :key="index" :value="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="名称">
          <Input v-model="info.name" placeholder="请输入名称"></Input>
        </FormItem>
      </Form>
  </Modal>
</div>
</template>

<script>
import { deleteResourceMap, findResourceMapList, findResourceMapLabelList, saveResourceMap } from '../../../api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      tableData: [],
      modal: false,
      info: {},
      labelList: []
    }
  },
  methods: {
    init () {
      findResourceMapList().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    addInfo (e) {
      this.modal = true
      this.info = {}
      this.info.pid = e.id
      this.info.grade = (parseInt(e.grade) + 1).toString()
      this.info.id = e.id + '-' + (new Date().getTime())
    },
    updateInfo (e) {
      this.modal = true
      this.info = {}
      this.info = e
    },
    deleteInfo (e) {
      let data = {
        id: e.id
      }
      deleteResourceMap(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '删除成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '删除失败！', desc: ret.data.errmsg })
        }
      })
    },
    saveReourceMapInfo () {
      console.log(this.info)
      saveResourceMap(this.info).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '保存失败！', desc: ret.data.errmsg })
        }
      })
    },
    findResourceMapLabelList () {
      findResourceMapLabelList().then(ret => {
        if (ret.data.errcode === 0) {
          this.labelList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.findResourceMapLabelList()
  }
}
</script>

<style scoped>

</style>
